<template>
  <div class="X_PageShow" id="X_PageShow">
    <div class="reveal">
      <div class="slides">
        <section>打造个人数字花园</section>
        <section>沉浸式笔记、视频学习</section>
        <section>不觉他物</section>
        <section>忘我</section>
        <section>专注</section>
        <!-- <section data-background-pdf="http://localhost:3000/pdf/test.pdf" data-background-size="contain"></section> -->
      </div>
    </div>
  </div>
</template>
  
<script>
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';

export default {
    name: 'X_PageShow',
    data() { 
      return {
        deck: null,
        // mypdf: require("@/assets/pdf/test.pdf")
      }
    },
    mounted () {
      this.init_ppt_show()
    },
    destroyed () {
      this.deck.destroy();
    },
    methods: {
      init_ppt_show () {
        this.deck = new Reveal({
          plugins: [Markdown]
        })
        this.deck.initialize( document.querySelector( '#X_PageShow' ), {
          embedded: true,
          keyboardCondition: 'focused', // only react to keys when focused
          autoSlide: 1000,
          loop: true
        } );
      }
    }
}
</script>

<style lang="less" scoped>
.X_PageShow {
  width: 100%;
  height: 700px;
  // min-height: 760px;
  // background-color: aquamarine;
}
</style>